<template>
  <div class="banner">
    <el-carousel
      :interval="4000"
      type="card"
      height="12.5rem"
      indicator-position="outside"
      trigger="click"
    >
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <el-image :src="item.imageUrl" style="height: 100%"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getShuffling } from "@/api/login.js";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      banners: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getShuffling();
  },
  mounted() {},
  methods: {
    async getShuffling() {
      const data = await getShuffling({
        type: 0
      });
      this.banners = data.data.banners;
      // console.log(data);
    }
  }
};
</script>

<style scoped lang="scss">
.el-image {
  border-radius: 0.625rem;
}
</style>
